<!--
 * @Author: zjj
 * @Date: 2019-12-25 10:49:25
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-17 09:57:11
 -->
<!--  -->
<template>
  <div class="open-reward">
    <Nav title="活动公告">
    </Nav>
    <router-link :to="{name:'service',query:{shop_id:29}}" tag="span" class="service">联系客服</router-link>
    <div class="order-list-wrapper">
      <Scroll
        :preventDefault="true"
        :click="true"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="orderList"
        ref="myScroll"
      >
        <div>
          <div class="order-list">
            <template v-for="(item,index) in orderList">
              <div class="order-item" :key="index">
                <div class="flex justify-between">
                  <span class="title ellipsis">{{item.name}}</span>
                  <span class="issue">第{{item.issue_id}}期</span>
                </div>
                <div class="flex justify-between mt-29">
                  <span class="color-red" :class="item.status!=2?'color-gray':''">{{status(item.status)}}</span>
                  <span class="color-red" @click="showRule(item)">活动规则</span>
                </div>
                <div class="info">
                  <!-- <div v-if="item.status!=0" class="color-red">我有{{item.numbers}}个活动号码券，获奖概率{{item.rate}}%</div> -->
                  <div>活动结果：{{item.luck_number}}</div>
                  <div>揭晓时间：{{item.open_time}}</div>
                  <div>幸运者：{{item.luck_name}}</div>
                  <div>活动奖品：{{item.name}}</div>
                </div>
                <div class="clear-fix mt-18">
                  <router-link
                    v-if="item.is_evaluate==0"
                    tag="span"
                    :to="{name:'shareWinOrder',params:{id:item.activity_id,order_id:item.agu_id,key:item.key}}"
                    class="option ml-8 float-r"
                  >分享晒单</router-link>
                  <!-- <router-link
                    tag="span"
                    :to="{name:'deliverDetail',params:{id:item.order_no}}"
                    class="option ml-8 float-r"
                  >查看物流</router-link> -->
                  <router-link
                    v-if="item.status!=0"
                    tag="span"
                    :to="{name:'myLuckyNumber',params:{key:item.key}}"
                    class="option float-r"
                  >我的号码</router-link>
                </div>
              </div>
            </template>
          </div>
        </div>
      </Scroll>
    </div>
    <RuleDialog :info.sync="info" :ruleFlag.sync="ruleFlag" @close="ruleFlag=false"></RuleDialog>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import { history_list } from "../../api/api";
import RuleDialog from "../../components/RuleDialog"
export default {
  mixins: [Page],
  components: { Nav, Scroll,RuleDialog },
  data() {
    return {
      orderList: [],
      info:{},
      ruleFlag:false
    };
  },
  computed: {},
  watch: {},
  methods: {
    showRule(item){
      this.info=item
      this.ruleFlag=true
    },
    status(status) {
      switch (status) {
        case 0:
          return "【未参与】";
        case 1:
          return "【未中奖】";
        case 2:
          return "【恭喜中奖】";
      }
    },
    _api() {
      history_list({
        page: this.current_page + 1
      }).then(({ data: { result } }) => {
        if (result && result.length != 0) {
          this.orderList = [...this.orderList, ...result];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    }
  },
  created() {},
  mounted() {
    this._api();
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.open-reward {
  height: 100%;
  .service {
    position: fixed;
    top: 45px;
    left: 0;
    width: 65px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    color: #fff;
    text-align: center;
    background: rgba(234, 55, 63, 1);
    border-radius: 0 11px 11px 0;
    z-index: 99;
  }
  .order-list-wrapper {
    margin-top: 20px;
    height: calc(100% - 65px);
    overflow: hidden;
    .order-list {
      margin: 0 15px;
      .order-item {
        margin-bottom: 8px;
        padding: 20px 8px 13px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.07);
        border-radius: 5px;
        .mt-29 {
          margin-top: 29px;
          margin-bottom: 22px;
        }
        .title {
          flex-shrink: 0;
          width: 240px;
          font-size: 11px;
          color: #9f9f9f;
          margin-right: 10px;
        }
        .issue {
          font-size: 11px;
          color: #9f9f9f;
        }
        .info {
          font-size: 12px;
          line-height: 22px;
        }
        .option {
          width: 60px;
          height: 28px;
          color: #ea373f;
          line-height: 28px;
          text-align: center;
          font-size: 11px;
          border: 1px solid rgba(234, 55, 63, 1);
          border-radius: 5px;
        }
      }
    }
  }
}
</style>